<template>
  <view class="me-container">
    <LoginWrap>
      <!-- 头部 -->
      <view class="header-container">
        <!-- #ifdef MP -->
        <u-navbar
          :is-back="false"
          background="transparent"
          :border-bottom="false"
        ></u-navbar>
        <!-- #endif -->
        <view class="info-container">
          <view class="user-info">
            <u-image
              class="avatar-image"
              shape="circle"
              width="98rpx"
              height="98rpx"
              :fade="false"
              :loading="false"
              :src="
                userInfo.avatar ||
                'https://qiniu-res.jintianwang.cc/20221105222247-avatar.png'
              "
            >
            </u-image>
            <view class="user-info-detail">
              <view class="user-name">{{ userInfo.user_name || "匿名" }}</view>
              <view
                v-if="userInfo && userInfo.authorInfo && userInfo.authorInfo.id"
                class="user-id"
                @click="setClipboardData(userInfo.invitation_code)"
                >邀请码：{{ userInfo.invitation_code }}</view
              >
              <!-- <view class="user-id">ID：{{ userInfo.id }}</view> -->
            </view>
          </view>
          <view @click="goProfile" class="set-user-info">
            <text>完善个人信息</text>
            <u-icon name="arrow-right" color="#56d39d" size="24"></u-icon>
          </view>
        </view>
        <view class="withdraw-container">
          <view class="withdraw-header">
            <view>收益数据</view>
            <view @click="goCashLog" class="cash-log">
              <u-icon name="rmb" color="#56d39d" size="24"></u-icon>
              <text class="ml-6">提现记录</text>
            </view>
          </view>
          <view class="cash-item">
            <view class="item">
              <view class="item-content">
                <view class="title">可提现</view>
                <view class="cash-num">{{ userInfo.balance || "0.00" }}</view>
              </view>
            </view>
            <view class="item">
              <view class="item-content">
                <view class="title">总收益</view>
                <view class="cash-num">{{
                  userStatistics.totalIncome || "0.00"
                }}</view>
              </view>
            </view>
          </view>
          <view class="earning-item">
            <view class="item">
              <view class="item-num">{{
                userStatistics.nowIncome || "0.00"
              }}</view>
              <view class="item-name">今日预估</view>
            </view>
            <view class="item">
              <view class="item-num">{{
                userStatistics.notSettlementOrder > 0
                  ? "计算中"
                  : userStatistics.yesterdayIncome || "0.00"
              }}</view>
              <view class="item-name">昨日收益</view>
            </view>
            <view class="item">
              <view @click="goWallet" class="wallet">我的钱包</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 其他 -->
      <view class="service-container" style="display: none">
        <view class="service-content default-box-shadow">
          <view class="service-item" @click="handleCustomer">
            <image
              src="https://qiniu-res.jintianwang.cc/20221105145937-daoshi.png"
              mode="scaleToFill"
              class="service-item-icon"
            />
            <view class="service-item-name">联系客服</view>
          </view>
          <!-- <view class="service-item margin-bottom24" @click="handleCustomer">
            <image
              src="https://qiniu-res.jintianwang.cc/20221116092350-service.png"
              mode="scaleToFill"
              class="service-item-icon"
            />
            <view class="service-item-name">联系客服</view>
          </view> -->
          <view class="service-item" @click="goTemaMembers">
            <image
              src="https://qiniu-res.jintianwang.cc/20221105144952-chengyuan.png"
              mode="scaleToFill"
              class="service-item-icon"
            />
            <view class="service-item-name">团队成员</view>
          </view>
          <view class="service-item" @click="goTemaEarning">
            <image
              src="https://qiniu-res.jintianwang.cc/20221105144952-shouyi.png"
              mode="scaleToFill"
              class="service-item-icon"
            />
            <view class="service-item-name">团队收益</view>
          </view>
          <view class="service-item">
            <!-- #ifdef H5 -->
            <image
              src="https://qiniu-res.jintianwang.cc/20221105144952-yaoqing.png"
              mode="scaleToFill"
              class="service-item-icon"
              @click="handleCreatePoster"
            />
            <view class="service-item-name" @click="handleCreatePoster"
              >邀请好友</view
            >
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <button class="cell-button" open-type="share">
              <image
                src="https://qiniu-res.jintianwang.cc/20221105144952-yaoqing.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">邀请好友</view>
            </button>
            <!-- #endif -->
          </view>
        </view>
      </view>

      <!-- 团队指导 -->
      <view
        class="service-container"
        style="margin-top: 80rpx; padding-top: 6rpx"
      >
        <!-- 上传图片 -->
        <view class="service-content-view">
          <view class="service-content-title">
            <text>团队指导</text>
            <view class="back-btn" @click="goFeedback">
              <u-icon name="edit-pen" color="#56d39d" size="24"></u-icon>
              <text>投诉导师</text>
            </view>
          </view>

          <!-- 邀请人 -->
          <view class="invitation-box">
            <view class="avatar-box">
              <u-image
                class="avatar-image"
                shape="circle"
                width="80rpx"
                height="80rpx"
                :fade="false"
                :loading="false"
                :src="
                  invitationUserInfo && invitationUserInfo.avatar
                    ? invitationUserInfo.avatar
                    : platformInfo.platform_logo
                "
              >
              </u-image>
            </view>
            <view class="service-name">
              <text v-if="invitationUserInfo">{{
                invitationUserInfo.user_name
              }}</text>
              <text v-else>{{ platformInfo.platform_name }}-官方客服</text>
            </view>
            <view
              v-if="invitationUserInfo"
              class="service-btn"
              @click="copyNumber"
            >
              <text>联系Ta</text>
            </view>
            <view v-else class="service-btn" @click="handleTutor">
              <text>联系Ta</text>
            </view>
          </view>

          <view class="service-content service-content2">
            <view class="service-item" @click="gotoOrder">
              <image
                src="https://qiniu-res.jintianwang.cc/20221105144952-shouyi.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">我的订单</view>
            </view>
            <view class="service-item" @click="goTemaMembers">
              <image
                src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01tPpzFC2BzNSg629ij_!!1888948409.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">团队成员</view>
            </view>
            <view class="service-item" @click="goTemaEarning">
              <image
                src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01zsBsDr2BzNSfH1rBY_!!1888948409.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">团队收益</view>
            </view>
            <view
              v-if="userInfo && userInfo.is_leader === '1'"
              class="service-item"
              @click="goTemaEarning2"
            >
              <image
                src="https://img.alicdn.com/imgextra/i4/1888948409/O1CN01IFBrUq2BzNShBNBW0_!!1888948409.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">团长收益</view>
            </view>
            <view class="service-item">
              <!-- #ifdef H5 -->
              <image
                src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01RwNa5q2BzNSfH2rXx_!!1888948409.png"
                mode="scaleToFill"
                class="service-item-icon"
                @click="handleCreatePoster"
              />
              <view class="service-item-name" @click="handleCreatePoster"
                >邀请好友</view
              >
              <!-- #endif -->
              <!-- #ifdef MP-WEIXIN -->
              <button class="cell-button" open-type="share">
                <image
                  src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01RwNa5q2BzNSfH2rXx_!!1888948409.png"
                  mode="scaleToFill"
                  class="service-item-icon"
                />
                <view class="service-item-name">邀请好友</view>
              </button>
              <!-- #endif -->
            </view>
          </view>
        </view>
      </view>
      <!-- 团队指导 -->

      <!-- 其他 -->
      <view class="service-container" style="margin-top: 0; padding-top: 6rpx">
        <!-- 上传图片 -->
        <view class="service-content-view">
          <view class="service-content-title">
            <text>其他服务</text>
          </view>
          <view class="service-content service-content2">
            <view
              class="service-item2 margin-bottom24"
              @click="handleDouyinMount"
            >
              <image
                src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01VPCjRr2BzNTQ43fkj_!!1888948409.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">0粉挂载</view>
            </view>
            <view class="service-item2 margin-bottom24" @click="handleCustomer">
              <image
                src="https://img.alicdn.com/imgextra/i2/1888948409/O1CN01VprKEP2BzNSeghHpU_!!1888948409.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">联系客服</view>
            </view>
            <view
              @click="goOrderEarnings"
              class="service-item2 margin-bottom24"
            >
              <image
                src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01HWUgVU2BzNSZyqC2o_!!1888948409.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">收益报表</view>
            </view>
            <view @click="goFeedback" class="service-item2 margin-bottom24">
              <image
                src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN018pveft2BzNSfK6ePK_!!1888948409.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">反馈意见</view>
            </view>
            <view
              @click="showKsPopup = true"
              class="service-item2 margin-bottom24"
            >
              <image
                src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01sq73Rg2BzNShtGPnG_!!1888948409.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">快手模式</view>
            </view>
            <!--  <view @click="changeInvitationUser" class="service-item2 margin-bottom24">
              <image
                src="https://qiniu-res.jintianwang.cc/2023/08/17/20230817185128-8.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">更换邀请人</view>
            </view> -->
            <view @click="goAbout" class="service-item2 margin-bottom24">
              <image
                src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01t0NjzX2BzNSg9JIx2_!!1888948409.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">关于我们</view>
            </view>
            <view @click="goAgreement" class="service-item2 margin-bottom24">
              <image
                src="https://img.alicdn.com/imgextra/i2/1888948409/O1CN01tRBWq22BzNSht1RTr_!!1888948409.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">服务协议</view>
            </view>
            <!-- <view @click="handleLogout" class="service-item2 margin-bottom24">
              <image
                src="https://qiniu-res.jintianwang.cc/2023/08/17/20230817185128-11.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">退出登陆</view>
            </view> -->
            <view @click="systemSet" class="service-item2 margin-bottom24">
              <image
                src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01slYuEU2BzNSVVOYDO_!!1888948409.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">系统设置</view>
            </view>
          </view>
        </view>
      </view>
    </LoginWrap>
    <!-- 联系我们的 -->
    <ContactPopup
      :popup-show="contactPopup.show"
      :info="contactPopup.info"
      @close="closeContactPopup"
    >
    </ContactPopup>
    <!-- 海报 -->
    <Poster
      ref="poster"
      :popupShow="Poster.show"
      @open="openPop"
      @close="closePosterPopup"
    >
    </Poster>
    <!-- 快手模式 -->
    <u-popup v-model="showKsPopup" mode="center">
      <view class="ks-model-container">
        <view class="model-content">
          <u-switch
            class="ks-model-switch"
            v-model="ksModelChecked"
            active-value="1"
            inactive-value="0"
            active-color="#56d39d"
            inactive-color="#eee"
            @change="changeKsModel"
          >
          </u-switch>
        </view>
        <view class="close-icon" @click="showKsPopup = false">
          <u-icon name="close-circle" color="#fff" size="58"></u-icon>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  getUserInfoById,
  userStatisticsOrder,
  getInvitationUserInfoBySourceCode,
  changeInvitationUser,
  updatekuaishouModel,
} from "@/api/user";
import { platformInfoByBusinessId } from "@/api/applet";
import LoginWrap from "@/components/loginWrap/loginWrap.vue";
import ContactPopup from "@/components/contact/contact.vue";
import Poster from "@/components/poster/poster.vue";
import { mapGetters } from "vuex";
export default {
  components: {
    LoginWrap,
    ContactPopup,
    Poster,
  },
  data() {
    return {
      platformInfo: {
        platform_logo:
          "https://qiniu-res.jintianwang.cc/20221105222247-avatar.png",
      },
      contactPopup: {
        show: false,
        info: {
          title: "",
          qrcode: "",
          wechatNumber: "",
        },
      },
      Poster: {
        show: false,
        posterList: [],
      },
      userInfo: {
        user_name: "",
        avatar: "",
      }, // 用户信息
      invitationUserInfo: null,
      showKsPopup: false,
      ksModelChecked: true, // 快手模式
    };
  },
  computed: {
    ...mapGetters(["userStatistics", "version","userInfo"]),
  },
  onLoad() {
    console.log("mine", this.$route,this.userInfo,this.userStatistics);
    // if (this.$route.query.id.indexOf("@") > -1) {
    //   let querys = this.$route.query.id.split("@");
    //   if (querys[0] === "merchant") {
    //     uni.navigateTo({
    //       url: `/pages/merchant/merchant`,
    //     });
    //   }
    // }
    this.getPlatformInfoByBusinessId();
  },
  onShow() {
    this.userInfoById();
    this.getUserStatisticsOrder();
  },
  methods: {
    // 抖音0粉挂载
    handleDouyinMount() {
      let num = this.userStatistics.totalIncome > 200 ? 3 : 1;
      uni.navigateTo({
        url: "/pages/douyinMount/application/index?num=" + num,
      });
    },

    // 切换快手模式
    changeKsModel(val) {
      updatekuaishouModel({
        ks_model: val == 0 ? 1 : 0,
      }).then((result) => {
        if (result && result.code === 200) {
          this.showKsPopup = false;
          this.userInfoById();
          uni.showToast({
            title: "操作成功",
            icon: "none",
          });
        }
      });
    },

    // 获取邀请人信息
    getInvitationUserInfoBySourceCode() {
      getInvitationUserInfoBySourceCode({
        source_code: this.userInfo.source_code,
      }).then((result) => {
        if (result && result.data) {
          this.invitationUserInfo = result.data;
        }
      });
    },

    // 获取用户信息
    userInfoById() {
      getUserInfoById().then((result) => {
        if (result && result.data) {
          let data = result.data;
          data.balance = parseFloat(data.balance || 0).toFixed(2);
          this.userInfo = data;
          this.ksModelChecked = data.authorInfo.ks_model == 1 ? false : true;
          this.getInvitationUserInfoBySourceCode();
        }
      });
    },

    // 获取用户统计信息
    getUserStatisticsOrder() {
      userStatisticsOrder().then((result) => {
        uni.hideToast();
        if (result && result.code === 200) {
          this.$store.dispatch("setUserStatistics", result.data);
        }
      });
    },

    // 获取平台详情
    getPlatformInfoByBusinessId() {
      platformInfoByBusinessId().then((result) => {
        if (result && result.code === 200) {
          this.platformInfo = result.data;
        }
      });
    },

    // 复制号码
    copyNumber() {
      const invitationUserInfo = this.invitationUserInfo;
      if (invitationUserInfo) {
        this.setClipboardData(
          invitationUserInfo.authorInfo.merchant_contact_information
        );
      } else {
        this.setClipboardData(this.platformInfo.tutor_wechat_number);
      }
    },

    // 关闭弹窗
    closeContactPopup() {
      this.contactPopup.show = false;
    },

    // 联系客服
    handleCustomer() {
      this.contactPopup.info.title = "截图扫码或复制微信联系客服";
      this.contactPopup.info.wechatNumber =
        this.platformInfo.platform_customer_wechat;
      this.contactPopup.info.qrcode =
        this.platformInfo.platform_customer_wechat_qrcode;
      this.contactPopup.show = true;
    },

    // 联系导师
    handleTutor() {
      this.contactPopup.info.title = "截图扫码或复制微信联系导师";
      this.contactPopup.info.wechatNumber =
        this.platformInfo.tutor_wechat_number;
      this.contactPopup.info.qrcode = this.platformInfo.tutor_wechat_qrcode;
      this.contactPopup.show = true;
    },

    // 生成海报
    handleCreatePoster() {
      this.$refs.poster.getPostList();
      uni.showLoading({
        title: "加载中...",
        icon: "loading",
      });
      // setTimeout(()=>{
      //   this.Poster.show = true;
      // },3000)
    },
    openPop() {
      this.Poster.show = true;
      uni.hideLoading();
    },
    // 设置复制
    setClipboardData(text) {
      uni.setClipboardData({
        data: text,
        success: function () {
          uni.showToast({
            title: "复制成功",
            icon: "none",
            mask: false,
          });
        },
      });
    },

    // 生成海报成功
    closePosterPopup() {
      this.Poster.show = false;
    },

    // 更改邀请用户
    changeInvitationUser() {
      uni.showModal({
        title: "更换邀请人",
        editable: true,
        placeholderText: "请输入上级邀请码",
        success: (res) => {
          if (res.confirm) {
            if (res.content) {
              changeInvitationUser({
                source_code: res.content,
              }).then((result) => {
                if (result && result.code === 200) {
                  uni.showToast({
                    title: "设置成功",
                    icon: "success",
                    mask: false,
                  });
                  this.userInfoById();
                }
              });
            } else {
              uni.showToast({
                title: "请输入上级邀请码",
                icon: "none",
              });
            }
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },

    // 完善个人信息
    goProfile() {
      uni.navigateTo({ url: "/pages/profile/profile" });
    },

    // 完善个人信息
    goWallet() {
      uni.navigateTo({ url: "/pages/wallet/detail" });
    },

    // 反馈意见
    goFeedback() {
      uni.navigateTo({ url: "/pages/feedback/feedback" });
    },

    // 团队成员
    goTemaMembers() {
      uni.navigateTo({ url: "/pages/team/teamMembers" });
    },
    //我的订单
    gotoOrder(){
      uni.navigateTo({ url: "/pages/orderList/order" });
    },
    // 团队收益
    goTemaEarning() {
      uni.navigateTo({ url: "/pages/team/earning" });
    },

    // 团队收益
    goTemaEarning2() {
      uni.navigateTo({ url: "/pages/team/teamderEarningDetail" });
    },

    // 关于我们
    goAbout() {
      uni.navigateTo({ url: "/pages/about/about" });
    },

    // 前往用户协议
    goAgreement() {
      uni.navigateTo({
        url: "/pages/about/agreement",
      });
    },

    // 提现记录
    goCashLog() {
      uni.navigateTo({ url: "/pages/wallet/cashLog" });
    },

    // 自推收益
    goOrderEarnings() {
      uni.navigateTo({ url: "/pages/earnings/myOrderEarnings" });
    },

    // 系统设置
    systemSet() {
      uni.navigateTo({ url: "/pages/mine/systemSet" });
    },

    // 退出登陆
    async handleLogout() {
      let businessId = "";
      // #ifdef MP
      businessId = config.id;
      // #endif
      // #ifdef H5
      businessId = uni.getStorageSync("businessId");
      // #endif
      await this.$store.dispatch("setToken", "");
      uni.setStorageSync("token", "");
      uni.reLaunch({
        url: `/pages/mine/login?id=${businessId}`,
      });
    },
  },
  onShareAppMessage() {},
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}
.header-container {
  padding: 48rpx 32rpx 50rpx 32rpx;
  background: url("https://img.alicdn.com/imgextra/i1/1888948409/O1CN01orAjId2BzNShvPH1r_!!1888948409.png")
    no-repeat;
  background-size: cover;
  position: relative;
  height: 536rpx;

  .info-container {
    display: flex;
    width: 100%;
    height: 100rpx;
    justify-content: space-between;
    align-items: center;

    .user-info {
      display: flex;
      align-items: center;
      color: #fff;

      .user-name {
        font-size: 32rpx;
      }

      .user-id {
        font-size: 24rpx;
      }
    }

    .set-user-info {
      width: 200rpx;
      height: 54rpx;
      text-align: center;
      font-size: 24rpx;
      line-height: 54rpx;
      color: $uni-color-primary;
      background-color: #fff;
      border-radius: 27rpx;
    }

    .avatar-image {
      width: 98rpx;
      height: 98rpx;
      margin: auto;
      border: 2rpx solid #fff;
      margin-right: 30rpx;
      border-radius: 50%;
      box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
    }
  }

  .user-data-container {
    .user-data-view {
      display: flex;
      padding: 32rpx 0 48rpx 0;

      .user-data-item {
        flex: 1;
        align-items: center;
        text-align: center;
        color: #fff;
      }

      .user-data-num {
        font-size: 32rpx;
        font-weight: bold;
        padding-bottom: 12rpx;
      }

      .user-data-name {
        font-size: 28rpx;
      }
    }
  }

  .withdraw-container {
    padding: 20rpx 24rpx 36rpx 24rpx;
    // background: linear-gradient(to right, #8a78f0, #96aff3);
    background: #fff;
    border-radius: 16rpx;
    position: absolute;
    width: calc(100% - 64rpx);
    bottom: -50rpx;
    box-shadow: 0 4rpx 30rpx 0 rgba(0, 0, 0, 0.06);
    color: #333;

    .my-wallet {
      width: 148rpx;
      height: 54rpx;
      line-height: 54rpx;
      background-color: #fff;
      color: $uni-color-primary;
      text-align: center;
      border-radius: 27rpx;
      font-size: 24rpx;
      font-weight: bold;
    }

    .balance {
      font-size: 28rpx;
      padding-bottom: 8rpx;
      flex: 1;

      .unit {
        font-size: 24rpx;
        padding-right: 6rpx;
      }

      .cash {
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .tip {
      font-size: 20rpx;
    }
  }

  .withdraw-header {
    width: 100%;
    height: 48rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;

    .cash-log {
      width: 170rpx;
      height: 42rpx;
      background: #f3f7fb;
      border-radius: 21rpx;
      font-size: 24rpx;
      color: $uni-color-primary;
      text-align: center;
      line-height: 42rpx;
    }
  }

  .cash-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24rpx;

    .item {
      width: 300rpx;
      height: 160rpx;
      background: url(https://img.alicdn.com/imgextra/i2/1888948409/O1CN017rBsYS2BzNSejzRYi_!!1888948409.jpg)
        no-repeat 50%;
      background-size: 100% 100%;
      padding: 0 24rpx;
      border-radius: 16rpx;
      overflow: hidden;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }

    .item:nth-child(2) {
      background: url(https://img.alicdn.com/imgextra/i4/1888948409/O1CN017mgmbp2BzNShIIqQA_!!1888948409.jpg)
        no-repeat 50%;
      background-size: 100% 100%;
    }

    .item-content {
      width: 100%;
      .title {
        font-size: 24rpx;
        color: #0a0e11;
        margin-bottom: 16rpx;
        width: 100%;
      }

      .cash-num {
        font-size: 50rpx;
        color: #0a0e11;
        font-weight: bold;
      }
    }
  }

  .earning-item {
    width: 100%;
    display: flex;
    align-items: center;

    .item {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }

    .item:nth-child(1),
    .item:nth-child(2) {
      border-right: 2rpx solid rgba(12, 14, 27, 0.06);
    }

    .item-num {
      font-size: 36rpx;
      color: #0a0e11;
      margin-bottom: 6rpx;
    }

    .item-name {
      font-size: 24rpx;
      color: #0a0e11;
    }

    .wallet {
      width: 180rpx;
      height: 64rpx;
      background: linear-gradient(0deg, $uni-color-primary, $uni-color-primary);
      border-radius: 16rpx;
      font-size: 26rpx;
      color: #fff;
      text-align: center;
      line-height: 64rpx;
      margin-left: 24rpx;
    }
  }
}

.service-container {
  margin-top: 50rpx;
  padding: 32rpx;

  .invitation-box {
    width: 90%;
    margin: 20rpx auto;
    margin-bottom: 0;
    border-radius: 16rpx;
    padding: 24rpx;
    background-color: #eaeaea;
    display: flex;
    align-items: center;
    position: relative;

    .avatar-box {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background-color: #fff;
    }

    .service-name {
      flex: 1;
      padding-left: 12rpx;
      font-size: 24rpx;
    }

    .service-btn {
      font-size: 22rpx;
      color: #fff;
      background: linear-gradient(to right, #888, #3c3947);
      padding: 0 24rpx;
      border-radius: 24rpx;
      height: 48rpx;
      line-height: 48rpx;
    }
  }

  .service-content {
    padding: 32rpx 0;
    box-shadow: 0rpx 1rpx 10rpx 2rpx #d5dcf0;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .service-item {
      // max-width: 25%;
      // min-width: 25%;
      flex: 1;
      text-align: center;

      &-icon {
        width: 60rpx;
        height: 60rpx;
      }

      &-name {
        font-size: 24rpx;
        color: #888;
      }
    }

    .service-item2 {
      max-width: 25%;
      min-width: 25%;
      text-align: center;

      &-icon {
        width: 60rpx;
        height: 60rpx;
      }

      &-name {
        font-size: 24rpx;
        color: #888;
      }
    }

    .margin-bottom24 {
      margin-bottom: 24rpx;
    }
  }

  .service-content-view {
    box-shadow: 0 4rpx 30rpx 0 rgba(0, 0, 0, 0.06);
    border-radius: 16rpx;
    background: #fff;
  }

  .service-content-title {
    padding: 24rpx 0 12rpx 32rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    border-bottom: 1rpx solid #eaeaea;
    display: flex;
    position: relative;
  }

  .service-content2 {
    box-shadow: none;
    border-radius: 0;
  }
}
.back-btn {
  position: absolute;
  right: 32rpx;
  top: 0;
  bottom: 0;
  margin: auto;
  font-size: 22rpx;
  color: $uni-color-primary;
  background: #f3f7fb;
  padding: 0 24rpx;
  border-radius: 24rpx;
  height: 48rpx;
  line-height: 48rpx;
}
.cell-button {
  background: none;
  padding: 0;
  box-shadow: none;
  line-height: 24rpx;
  position: relative;
  height: 100rpx;

  .service-item-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  .service-item-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 32rpx;
    line-height: 32rpx;
    margin: auto;
  }
}
.cell-button::after {
  display: none;
}

.me-container ::v-deep .u-mode-center-box {
  background-color: transparent;
}

.ks-model-container {
  width: 498rpx;
  border-radius: 16rpx;
  overflow: hidden;
  // background-color: #fff;

  .model-content {
    width: 498rpx;
    height: 320rpx;
    background-image: url(https://img.alicdn.com/imgextra/i3/1888948409/O1CN01SC2mXz2BzNSd8G9Bw_!!1888948409.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
  }

  .ks-model-switch {
    position: absolute;
    right: 32rpx;
    top: 116rpx;
  }

  .close-icon {
    padding: 24rpx;
    display: flex;
    justify-content: center;
  }
}
</style>
